<template>
	<view class="content">
		<view :style='{"minHeight":"100%","width":"100%","padding":"0","position":"relative","background":"#F3F3F3","height":"auto"}'>
			<view v-if="user&&user.id" :style='{"padding":"40rpx 24rpx 0","margin":"0 0 20rpx 0","background":"url(http://codegen.caihongy.cn/20250208/25a8cab46d3f49188080fc8ad331c3fe.png) no-repeat top center / 100% auto","display":"flex","width":"100%","position":"relative","height":"auto"}' @tap="onPageTap('../user-info/user-info')" class="header" v-bind:class="{'status':isH5Plus}">
				<view :style='{"alignContent":"center","alignItems":"center","flexWrap":"wrap","flex":"1","display":"flex","height":"100%"}' v-if="tableName=='laoren'" class="userinfo">
					<image :style='{"width":"88rpx","padding":"0","margin":"0 20rpx 0 0","borderRadius":"100%","height":"88rpx"}' :src="user.touxiang?baseUrl+user.touxiang:require('../../static/gen/upload.png')"></image>
					<view :style='{"width":"240rpx","flex":"1","flexDirection":"column","justifyContent":"center","display":"flex"}' class="info">
						<view :style='{"width":"100%","lineHeight":"36rpx","fontSize":"24rpx","color":"#000"}'>{{user.xingming}}<text v-if="user.vip&& user.vip=='是'">(VIP)</text></view>
					</view>
					
					<view :style='{"margin":"60rpx 0 0","color":"#000","flexDirection":"row","display":"flex","gap":"20rpx","width":"100%","flexFlow":"wrap","justifyContent":"center"}' class="info">
						<view :style='{"padding":"8rpx","borderRadius":"12rpx","textAlign":"center","background":"none","flexDirection":"column","display":"flex","width":"30%","lineHeight":"36rpx","fontSize":"24rpx"}'>
							<span :style='{"color":"inherit"}'>电话：</span>
							<span :style='{"color":"inherit"}'>{{user.laorendianhua}}</span>
						</view>
					</view>
				</view>
				<view :style='{"alignContent":"center","alignItems":"center","flexWrap":"wrap","flex":"1","display":"flex","height":"100%"}' v-if="tableName=='yuangong'" class="userinfo">
					<image :style='{"width":"88rpx","padding":"0","margin":"0 20rpx 0 0","borderRadius":"100%","height":"88rpx"}' :src="user.touxiang?baseUrl+user.touxiang:require('../../static/gen/upload.png')"></image>
					<view :style='{"width":"240rpx","flex":"1","flexDirection":"column","justifyContent":"center","display":"flex"}' class="info">
						<view :style='{"width":"100%","lineHeight":"36rpx","fontSize":"24rpx","color":"#000"}'>{{user.yuangongxingming}}<text v-if="user.vip&& user.vip=='是'">(VIP)</text></view>
					</view>
					
					<view :style='{"margin":"60rpx 0 0","color":"#000","flexDirection":"row","display":"flex","gap":"20rpx","width":"100%","flexFlow":"wrap","justifyContent":"center"}' class="info">
						<view :style='{"padding":"8rpx","borderRadius":"12rpx","textAlign":"center","background":"none","flexDirection":"column","display":"flex","width":"30%","lineHeight":"36rpx","fontSize":"24rpx"}'>
							<span :style='{"color":"inherit"}'>员工电话：</span>
							<span :style='{"color":"inherit"}'>{{user.yuangongdianhua}}</span>
						</view>
					</view>
				</view>
		
				<view :style='{"padding":"8rpx","alignItems":"center","top":"40rpx","borderRadius":"30rpx","flexDirection":"row","background":"linear-gradient( 131deg, #99ACFF 0%, #9EEEEB 100%)","display":"flex","width":"160rpx","position":"absolute","right":"20rpx","justifyContent":"center","height":"auto"}' class="setting">
					<text class="icon iconfont icon-qita6" :style='{"border":"0","margin":"0 20rpx 0 0","color":"#fff","borderRadius":"0","width":"48rpx","lineHeight":"48rpx","fontSize":"48rpx"}'></text>
					<text :style='{"color":"#fff","lineHeight":"2","fontSize":"24rpx"}'>设置</text>
				</view>
			</view>
			
			<view v-else :style='{"padding":"40rpx 24rpx 0","margin":"0 0 20rpx 0","background":"url(http://codegen.caihongy.cn/20250208/25a8cab46d3f49188080fc8ad331c3fe.png) no-repeat top center / 100% auto","display":"flex","width":"100%","position":"relative","height":"auto"}' @tap="loginClick" class="header" v-bind:class="{'status':isH5Plus}">
				<view :style='{"alignItems":"center","color":"#000","display":"flex","width":"100%","fontSize":"36rpx","justifyContent":"center","height":"100%"}'>登录/注册</view>
			</view>
			
			<!-- menu -->
			<view v-if="true" class="menu_view">
				<view v-for="(item, index) in customMenuList" :key="index" class="menu-item" @tap="onPageTap2(item.tableName)">
					<view class="iconarr" :class="item.icon"></view>
					<view class="text">{{item.name}}</view>
				</view>
			</view>
			
			<!-- <view :style='{"width":"100%","background":"none","height":"auto"}' class="list">
				
				<view :style='{"width":"100%","margin":"40rpx 0 0","background":"#fff","height":"auto"}'>
					<view :style='{"width":"100%","padding":"0 20rpx","background":"none","justifyContent":"space-between","display":"flex","height":"auto"}'>
						<view :style='{"fontSize":"28rpx","lineHeight":"72rpx","color":"#000","fontWeight":"600"}'>我的服务</view>
					</view>
					<view class="me-menu-view">
						<block v-for="item in menuList" v-bind:key="item.roleName">
							<block v-if="role==item.roleName" v-bind:key="menu.menu" v-for="(menu,index) in item.backMenu">
								<block v-bind:key="child.tableName" v-for=" (child,sort) in menu.child">
									<view class="me-menu-item" v-if="child.tableName!='orders/已发货' && child.tableName!='orders/已退款' &&child.tableName!='orders/已取消' && child.tableName!='orders/未支付' && child.tableName!='orders/已支付' && child.tableName!='orders/已完成' && child.tableName!='exampaper' && child.tableName!='examquestion'&& child.tableName!='hasTranslate' " @tap="onPageTap('../'+child.tableName+'/list?userid='+user.id+'&menuJump='+child.menuJump)" hover-class="hover">
										<view class="me-menu-icon" :class="child.appFrontIcon"></view>
										<view class="text">{{child.menu}}</view>
										<view class="icon iconfont icon-jinru"></view>
									</view>
								</block>
							</block>
						</block>
						<view v-if="user&&user.id" @tap="onPageTap('../forum-list/list')" class="me-menu-item" hover-class="hover">
							<view class="cuIcon-scan me-menu-icon"></view>
							<view class="text">我的发贴</view>
							<view class="icon iconfont icon-jinru"></view>
						</view>
						<view v-if="user&&user.id" @tap="passwordShow()" class="me-menu-item" hover-class="hover">
							<view class="cuIcon-lock me-menu-icon"></view>
							<view class="text">修改密码</view>
							<view class="icon iconfont icon-jinru"></view>
						</view>
					</view>
				</view>
			</view> -->
			
			<!-- 公告资讯 -->
			<view class="listBox news" :style='{"width":"100%","padding":"0 20rpx","margin":"60rpx 0 0","background":"none"}'>
				<view class="title" :style='{"padding":"0","margin":"0","color":"#FFFFFF","alignItems":"center","display":"flex","justifyContent":"flex-start","borderRadius":"40rpx","background":"none","width":"100%","fontSize":"40rpx","position":"relative","fontWeight":"600","height":"100rpx"}'>
					<view :style='{"padding":"0 40rpx","fontSize":"40rpx","lineHeight":"100rpx","color":"inherit","borderRadius":"40rpx","background":"linear-gradient( 134deg, #9EEEEB 0%, #99ACFF 100%)"}'>公告资讯</view>
					<view :style='{"alignItems":"center","top":"20rpx","color":"#5F5F5F","display":"flex","position":"absolute","right":"20rpx","justifyContent":"center"}' @tap="onPageTap2('news')">
					  <text :style='{"color":"inherit","fontSize":"32rpx"}'>查看更多</text>
					  <text class="icon iconfont icon-gengduo1" :style='{"color":"inherit","fontSize":"32rpx"}'></text>
					</view>
				</view>
	
				<view class="news-box1" :style='{"width":"100%","padding":"0","margin":"40rpx 0 0","height":"auto"}'>
					<view @tap="onNewsDetailTap(item.id)" v-for="(item,index) in news" :key="index" class="list-item" :style='{"boxShadow":"0 4rpx 20rpx rgba(0,0,0,0.1)","margin":"0 0 30rpx","borderRadius":"20rpx","flexWrap":"wrap","background":"#FFFFFF","display":"flex","width":"100%","height":"auto","padding":"20rpx"}'>
						<image :style='{"width":"240rpx","objectFit":"cover","display":"block","height":"240rpx","borderRadius":"10rpx"}' mode="aspectFill" class="listmpic" :src="baseUrl+item.picture"></image>
						<view class="list-item-body" :style='{"width":"calc(100% - 260rpx)","padding":"0 0 0 20rpx","margin":"0","height":"auto"}'>
							<view :style='{"padding":"0","margin":"0 0 16rpx 0","color":"#333333","width":"100%","lineHeight":"48rpx","fontSize":"36rpx","fontWeight":"600"}' class="title">{{item.title}}</view>
							<view :style='{"padding":"0","margin":"0 0 16rpx 0","overflow":"hidden","color":"#666666","maxHeight":"160rpx","width":"100%","lineHeight":"40rpx","fontSize":"32rpx"}' class="text">{{item.introduction}}</view>
							<view :style='{"padding":"0","fontSize":"28rpx","color":"#999"}'>
								<text class="icon iconfont icon-shijian21" :style='{"margin":"0 10rpx 0 0","fontSize":"28rpx","color":"#999"}'></text>
								<text>{{item.addtime.split(' ')[0].replace(/\-/g,'-')}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view style="width: 100%;height: 80px"></view>
		</view>
		<uni-popup class="popup-content" ref="passwordPopup" type="bottom">
			<view class="passwordForm">
				<view class="passwordInput">
					<input type="password" v-model="passwordForm.mima" placeholder="原密码" style="font-size:36rpx;" />
				</view>
				<view class="passwordInput">
					<input type="password" v-model="passwordForm.newmima" placeholder="新密码" style="font-size:36rpx;" />
				</view>
				<view class="passwordInput">
					<input type="password" v-model="passwordForm.newmima1" placeholder="确认密码" style="font-size:36rpx;" />
				</view>
				<view class="passwordBtnView">
					<button class="passwordBtn" @click="updatePassword" style="font-size:36rpx;height:50px;line-height:50px;">更新</button>
				</view>
			</view>
		</uni-popup>
		
		<!-- 更多弹出层 -->
		<view class="more-popup" v-if="showMorePopup">
			<view class="more-popup-mask" @tap="hideMorePopup"></view>
			<view class="more-popup-content">
				<view class="more-popup-title" style="font-size:44rpx;">更多选项</view>
				<view class="more-menu-item" @tap="passwordShow">
					<text class="icon cuIcon-lock"></text>
					<text class="more-menu-text" style="font-size:38rpx;">修改密码</text>
				</view>
				<view class="more-menu-item" @tap="goToPage('duihuandingdan')">
					<text class="icon cuIcon-form"></text>
					<text class="more-menu-text" style="font-size:38rpx;">兑换订单</text>
				</view>
				<view class="more-popup-close" @tap="hideMorePopup" style="font-size:38rpx;padding:36rpx 0;">关闭</view>
			</view>
		</view>
		
		<customTabbar :pagePath="'../../pages/center/center'" :userRole="userRole"></customTabbar>
	</view>
</template>
<script>
	import menu from '@/utils/menu'
	export default {
		data() {
			return {
				isH5Plus: true,
				user: {},
				tableName:'',
				role: '',
				menuList: [],
				showMorePopup: false,
				iconArr: [
					'cuIcon-same',
					'cuIcon-deliver',
					'cuIcon-evaluate',
					'cuIcon-shop',
					'cuIcon-ticket',
					'cuIcon-cascades',
					'cuIcon-discover',
					'cuIcon-question',
					'cuIcon-pic',
					'cuIcon-filter',
					'cuIcon-footprint',
					'cuIcon-pulldown',
					'cuIcon-pullup',
					'cuIcon-moreandroid',
					'cuIcon-refund',
					'cuIcon-qrcode',
					'cuIcon-remind',
					'cuIcon-profile',
					'cuIcon-home',
					'cuIcon-message',
					'cuIcon-link',
					'cuIcon-lock',
					'cuIcon-unlock',
					'cuIcon-vip',
					'cuIcon-weibo',
					'cuIcon-activity',
					'cuIcon-friendadd',
					'cuIcon-friendfamous',
					'cuIcon-friend',
					'cuIcon-goods',
					'cuIcon-selection'
				],
				recommendList: [],
				recommendTable: '',
				recommendTitle: '',
				recommendPicture: '',
				news: [],
				passwordForm: {
					mima: '',
					newmima: '',
					newmima1: '',
				},
				customMenuList: [
					{
						name: '我要兑换',
						icon: 'cuIcon-shop',
						tableName: 'shangchenglipin'
					},
					{
						name: '我的收藏',
						icon: 'cuIcon-favor',
						tableName: 'storeup'
					},
					{
						name: '更多',
						icon: 'cuIcon-moreandroid',
						tableName: 'more'
					}
				],
			};
		},
		computed: {
			baseUrl() {
				return this.$base.url;
			},
		},
		async onLoad(){
			let menus = menu.list();
			this.menuList = menus;
			this.meMenuColor = this.meMenuColor.sort(()=> {
				return (0.5-Math.random());
			});
		},
		async onShow(){
            uni.removeStorageSync("useridTag");
			this.role = uni.getStorageSync("appRole");
			await this.getSession()
			this.getThumbsup()
			this.getStoreup()
			this.tableName = uni.getStorageSync("nowTable");
			let menus = menu.list();
			this.menuList = menus;
			this.getRecommendList()
			this.getNewsList()
			this.$forceUpdate()
		},
		methods: {
			async getNewsList(){
				let res;
				let params = {
					page: 1,
					limit: 4,
					sort: 'id',
					order: 'desc',
				}
				res = await this.$api.list('news', params)
				this.news = res.data.list
			},
			onNewsDetailTap(id) {
				this.$utils.jump(`../news-detail/news-detail?id=${id}`)
			},
			onPageTap2(index) {
				
				if(index === 'more') {
					console.log(index)
					this.showMorePopup = true;
					return;
				}
				
				let url = '../' + index + '/list'
				if(index=='forum'){
					url = '../forum-index/forum-index'
				}
				if(index=='recommend'){
					url = '../fuwuxiangmu/list?recommend=true'
				}
				uni.setStorageSync("useridTag",0);
				uni.navigateTo({
					url: url,
					fail: function() {
						uni.switchTab({
							url: url
						});
					}
				});
			},
			hideMorePopup() {
				this.showMorePopup = false;
			},
			goToPage(page) {
				this.hideMorePopup();
				uni.navigateTo({
					url: '../' + page + '/list',
					fail: function() {
						uni.switchTab({
							url: '../' + page + '/list'
						});
					}
				});
			},
			async getSession(){
				let table = uni.getStorageSync("nowTable");
				let res = await this.$api.session(table);
				this.user = res.data;
				this.$forceUpdate()
			},
			async getThumbsup(){
				if(!this.user||!this.user.id){
					return false
				}
				let res = await this.$api.page('storeup',{userid: this.user.id,type: 21})
				this.user.thumbsnum = Number(res.data.total)
				this.$forceUpdate()
			},
			async getStoreup(){
				if(!this.user||!this.user.id){
					return false
				}
				let res = await this.$api.page('storeup',{userid: this.user.id,type: 1})
				this.user.storenum = Number(res.data.total)
				this.$forceUpdate()
			},
			loginClick(){
				uni.navigateTo({
					url: '../login/login'
				});
			},
			onPageTap(url) {
                uni.setStorageSync("useridTag",1);
				uni.navigateTo({
					url: url,
					fail: function() {
						uni.switchTab({
							url: url
						});
					}
				});
			},
			passwordShow() {
				this.hideMorePopup();
				this.passwordForm = {
					mima: '',
					newmima: '',
					newmima1: '',
				}
				this.$forceUpdate()
				this.$refs.passwordPopup.open()
			},
			async updatePassword() {
				if (this.passwordForm.mima == ''){
					this.$utils.msg('原密码不能为空')
					return false
				}
				if (this.passwordForm.newmima == ''){
					this.$utils.msg('新密码不能为空')
					return false
				}
				if (this.passwordForm.newmima1 == ''){
					this.$utils.msg('确认密码不能为空')
					return false
				}
				let password = ''
				if (this.user.mima) {
					password = this.user.mima;
				} else if (this.user.password) {
					password = this.user.password;
				}
				let newpassword = this.passwordForm.mima
				if(password != newpassword){
					this.$utils.msg('原密码不正确')
					return false
				}
				if (this.passwordForm.newmima != this.passwordForm.newmima1){
					this.$utils.msg('两次密码不一致')
					return false
				}
				if (this.passwordForm.mima == this.passwordForm.newmima){
					this.$utils.msg('新密码与原密码相同！')
					return false
				}
				this.user.password = this.passwordForm.newmima
				this.user.mima = this.passwordForm.newmima
				await this.$api.update(this.tableName,this.user)
				this.$utils.msg('修改密码成功,下次登录系统生效')
				this.$refs.passwordPopup.close()
				this.getSession()
			},
			hasTranslate(){
				for(let x in this.menuList){
					if(this.menuList[x].roleName == this.role){
						for(let i in this.menuList[x].backMenu){
							if(this.menuList[x].backMenu[i].child.length) {
								for(let j in this.menuList[x].backMenu[i].child) {
									if(this.menuList[x].backMenu[i].child[j].tableName=='hasTranslate'){
										return true
									}
								}
							}
						}
					}
				}
				return false
			},
			async getRecommendList(){
				let params = {
					page: 1,
					limit: 4
				}
				let res;
				if(uni.getStorageSync("appUserid")) {
					res = await this.$api.recommend2('fuwuxiangmu', params);
				} else {
					res = await this.$api.recommend('fuwuxiangmu', params);
				}
				this.recommendList = res.data.list
				this.recommendTable = 'fuwuxiangmu'
				this.recommendTitle = 'fuwubiaoti'
				this.recommendPicture = 'fuwuzhaopian'
				this.$forceUpdate()
			},
			recommendDetail(id) {
				uni.navigateTo({
					url: `../${this.recommendTable}/detail?id=${id}`,
					fail: function() {
						uni.switchTab({
							url: `../${this.recommendTable}/detail?id=${id}`
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: calc(100vh - 94px);
		box-sizing: border-box;
	}
	.passwordForm {
		width: 100%;
		padding: 20px 30px 70px;
		background: #fff;
	
		.passwordInput {
			background: #eee;
			margin: 0 0 20px;
			padding: 0 20px;
			border-radius: 10px;
	
			input {
				height: 70px;
				line-height: 70px;
				font-size: 36rpx;
			}
		}
	
		.passwordBtnView {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px 0;
	
			.passwordBtn {
				padding: 0 40px;
				width: auto;
				height: 50px;
				line-height: 50px;
				font-size: 36rpx;
				color: #fff;
				background: #007aff;
				border: none;
				border-radius: 12px;
				box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.2);
			}
		}
	}
	.me-menu-view {
		padding: 0 30rpx;
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		height: auto;
		.me-menu-item {
			display: flex;
			width: 100%;
			border-color: #ccc;
			border-width: 0 0 2rpx;
			align-items: center;
			border-style: solid;
			height: auto;
			padding: 20rpx 0;
			.me-menu-icon {
				color: #4F2FFF;
				font-size: 48rpx;
				line-height: 1;
			}
			.text {
				padding: 0 20rpx;
				color: #222;
				flex: 1;
				width: 100%;
				font-size: 36rpx;
				line-height: 100rpx;
				font-weight: 500;
			}
			.icon {
				color: #777;
				width: 40rpx;
				font-size: 40rpx;
				line-height: 40rpx;
			}
		}
	}
	
	
	.menu_view {
		padding: 30rpx;
		margin: 30rpx 0;
		background: #fff;
		display: flex;
		width: 100%;
		justify-content: space-between;
		flex-wrap: wrap;
		height: auto;
		box-sizing: border-box;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
		border-radius: 16rpx;
		
		.menu-item {
			padding: 36rpx;
			margin: 0 0 30rpx 0;
			width: 30%;
			height: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border: 3rpx solid #d0d0d0;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
			transition: all 0.3s;
			
			&:active {
				transform: scale(0.95);
				background: #f8f8f8;
			}
			
			.iconarr {
				border-radius: 100%;
				padding: 0;
				margin: 0px auto;
				color: #9EEEEB;
				background: none;
				display: block;
				width: 88rpx;
				font-size: 88rpx;
				line-height: 88rpx;
				height: 88rpx;
			}
			.text {
				padding: 0;
				margin: 24rpx auto 0;
				color: #222;
				width: 100%;
				font-size: 36rpx;
				line-height: 44rpx;
				text-align: center;
				font-weight: 500;
			}
		}
	}
	
	.more-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		
		.more-popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
		}
		
		.more-popup-content {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			border-radius: 30rpx 30rpx 0 0;
			padding: 40rpx;
			box-sizing: border-box;
			
			.more-popup-title {
				font-size: 44rpx;
				font-weight: bold;
				text-align: center;
				margin-bottom: 40rpx;
			}
			
			.more-menu-item {
				display: flex;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 2rpx solid #eee;
				
				.icon {
					font-size: 48rpx;
					color: #4F2FFF;
					margin-right: 30rpx;
				}
				
				.more-menu-text {
					font-size: 38rpx;
					color: #222;
					font-weight: 500;
				}
			}
			
			.more-popup-close {
				margin-top: 40rpx;
				padding: 36rpx 0;
				text-align: center;
				background: #e8e8e8;
				color: #222;
				border-radius: 20rpx;
				font-size: 38rpx;
				font-weight: 500;
				box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
			}
		}
	}
	
	/* 公告资讯样式 */
	.listBox {
		&.news {
			.title {
				position: relative;
			}
			
			.news-box1 {
				.list-item {
					display: flex;
					margin-bottom: 30rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 20rpx;
					box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
					
					.listmpic {
						width: 240rpx;
						height: 240rpx;
						border-radius: 10rpx;
						object-fit: cover;
					}
					
					.list-item-body {
						width: calc(100% - 260rpx);
						padding-left: 20rpx;
						
						.title {
							font-size: 40rpx;
							font-weight: 600;
							line-height: 52rpx;
							color: #222222;
							margin-bottom: 20rpx;
						}
						
						.text {
							font-size: 36rpx;
							line-height: 44rpx;
							color: #444444;
							overflow: hidden;
							max-height: 180rpx;
							margin-bottom: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
